import { keyboard } from '@testing-library/user-event/dist/keyboard'
import React from 'react'
import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux'
import { insert } from './store'

// 引入store.ts中定义的连个新的类型
import { RootState } from './store'
const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
// const useAppDispatch = () => useDispatch<AppDispatch>()

export default function List() {
  const dispatch = useDispatch()
  const data = useAppSelector((state) => {
    return state.list.lis
  })
  return (
    <>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key !== 'Enter') return
          const value = (e.target as HTMLInputElement).value.trim()
          dispatch(insert(value))
        }}
      />
      <ul>
        {data.map((item: string, index: number) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </>
  )
}
